<template>
  <div class="table-wraper">
    <!-- v-tableHeight="{bottomOffset: 100}"  -->
    <el-table
      v-if="autoFillParent"
      ref="table"
      :height="tableHeight"
      :data="data"
      border
      header-row-class-name="table-header-style"
      empty-text="暂无数据"
      v-bind="$attrs"
      @current-change="handleCurrentChange"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        v-if="multipleTable"
        type="selection"
        width="55"
      />
      <template v-for="item in columns">
        <!-- 无槽 + 无固定列 -->
        <template v-if="! item.fixed && ! item.slot">
          <el-table-column :key="item.label" show-overflow-tooltip v-bind="item.attrs" :label="item.label" :prop="item.prop" :width="item.width" />
        </template>
        <!-- 只有固定列 -->
        <template v-else-if="item.fixed && ! item.slot">
          <el-table-column :key="item.label" show-overflow-tooltip v-bind="item.attrs" :label="item.label" :prop="item.prop" :width="item.width" :fixed="item.fixed" />
        </template>
        <!-- 只有槽 -->
        <template v-else-if="! item.fixed && item.slot">
          <el-table-column :key="item.label" show-overflow-tooltip v-bind="item.attrs" :label="item.label" :prop="item.prop" :width="item.width" :fixed="item.fixed">
            <template slot-scope="{row}">
              <slot :name="item.slot" :row="row" />
            </template>
          </el-table-column>
        </template>
        <!-- 固定列 + 槽 -->
        <template v-else-if="item.fixed && item.slot">
          <el-table-column :key="item.label" show-overflow-tooltip v-bind="item.attrs" :label="item.label" :prop="item.prop" :width="item.width" :fixed="item.fixed">
            <template slot-scope="{row}">
              <slot :name="item.slot" :row="row" />
            </template>
          </el-table-column>
        </template>
      </template>
    </el-table>
    <el-table v-else ref="table" :data="data" border header-row-class-name="table-header-style" empty-text="暂无数据" v-bind="$attrs" @current-change="handleCurrentChange" @selection-change="handleSelectionChange">
      <el-table-column
        v-if="multipleTable"
        type="selection"
        width="55"
      />
      <template v-for="item in columns">
        <!-- 无槽 + 无固定列 -->
        <template v-if="! item.fixed && ! item.slot">
          <el-table-column :key="item.label" show-overflow-tooltip v-bind="item.attrs" :label="item.label" :prop="item.prop" :width="item.width" />
        </template>
        <!-- 只有固定列 -->
        <template v-if="item.fixed && ! item.slot">
          <el-table-column :key="item.label" show-overflow-tooltip v-bind="item.attrs" :label="item.label" :prop="item.prop" :width="item.width" :fixed="item.fixed" />
        </template>
        <!-- 只有槽 -->
        <template v-if="! item.fixed && item.slot">
          <el-table-column :key="item.label" show-overflow-tooltip v-bind="item.attrs" :label="item.label" :prop="item.prop" :width="item.width" :fixed="item.fixed">
            <template slot-scope="{row}">
              <slot :name="item.slot" :row="row" />
            </template>
          </el-table-column>
        </template>
        <!-- 固定列 + 槽 -->
        <template v-if="item.fixed && item.slot">
          <el-table-column :key="item.label" show-overflow-tooltip v-bind="item.attrs" :label="item.label" :prop="item.prop" :width="item.width" :fixed="item.fixed">
            <template slot-scope="{row}">
              <slot :name="item.slot" :row="row" />
            </template>
          </el-table-column>
        </template>
      </template>
    </el-table>
    <div v-if="!noPage" class="pager">
      <el-pagination
        background
        layout="prev, pager, next"
        :current-page.sync="pageParams.pageNum"
        :total="total"
        @current-change="handlePageChange"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'ComTable',
  model: {
    prop: 'selectedRow',
    event: 'change'
  },
  props: {
    defaultrow: {
      type: Number,
      default: 0
    },
    autoFillParent: {
      type: Boolean,
      default: false
    },
    multipleTable: {
      type: Boolean,
      default: false
    },
    noPage: {
      type: Boolean,
      default: false
    },
    columns: {
      type: Array,
      default() {
        return []
      }
    },
    data: {
      type: Array,
      default() {
        return []
      }
    },
    selectedRow: {
      type: Object,
      default() {
        return {}
      }
    },
    total: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      pageParams: {
        pageSize: 10,
        pageNum: 1
      },
      multipleSelection: [],
      tableHeight: this.autoFillParent ? 80 : ''
    }
  },
  watch: {
    data: {
      handler(val) {
        // 1、自动计算错误
        // 2、没输入完，自动设置到第一行种导致数据错误
        // if (this.$attrs['highlight-current-row'] != null && val.length) {
        //   if (this.defaultrow === -1) return
        //   this.$nextTick(() => {
        //     this.$refs.table.setCurrentRow(val[0])
        //   })
        // }
      },
      immediate: true
    }
  },
  mounted() {
    if (this.autoFillParent) {
      this.$nextTick(() => {
        const tableHeight = this.$refs.table.$el.offsetHeight
        const parentEleHeight = this.$refs.table.$el.parentElement.offsetHeight
        // if (tableHeight < parentEleHeight - (this.noPage ? 0 : 50)) {
        //   this.tableHeight = tableHeight
        // } else {
        //   this.tableHeight = this.noPage ? parentEleHeight : parentEleHeight - 50
        // }
        this.tableHeight = this.noPage ? parentEleHeight : parentEleHeight - 50
        console.log(tableHeight)
      })
    }
  },
  methods: {
    handlePageChange(e) {
      this.$emit('pageChange', this.pageParams)
    },
    handleCurrentChange(val) {
      this.$emit('change', val)
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      this.$emit('getSelectedRows', val)
    }

  }
}
</script>
<style lang="scss" scoped>
.table-wraper{
  height: 100%;
}
.pager{
  height: 50px;
  display: flex;
  align-items: center;
}
::v-deep .table-header-style{
  background-color:#f5f7fa;
  th{
    background-color:#f5f7fa;
    // color: #909399;
    color: #333;
    div{
      text-align: center;
    }
  }
}
</style>
